<template>
  <div id="parameter">
    <el-alert style="margin-top:10px;" title="积分参数配置" type="info" :closable="false">
    </el-alert>
    <el-row type="flex" justify="center" style="margin-top:20px;">
      <el-form :model="dataForm" label-width="150px" :rules="dataForms" ref="dataForm">
        <el-row>
          <el-col :xs="24" :sm="18" :md="24" :lg="24">
            <el-form-item label="积分规则发放:">
              <!-- <el-input v-model="dataForm.name"  auto-complete="off" placeholder="请输入文章名称">
                </el-input> -->
              <el-switch v-model="dataForm.ruleSwitch" active-color="#13ce66" inactive-color="#ff4949" on-text="开" off-text="关" on-value="1" off-value="0">
              </el-switch>

            </el-form-item>
            <!-- <div class="hr-line-dashed"></div> -->
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="18" :md="24" :lg="24">
            <el-form-item label="退保积分退还:">
              <el-switch v-model="dataForm.tbreback" active-color="#13ce66" inactive-color="#ff4949" on-text="开" off-text="关" on-value="1" off-value="0">
              </el-switch>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="18" :md="24" :lg="24">
            <el-form-item label="积分有效期限:">
              <el-input v-model="dataForm.period" auto-complete="off" placeholder="请输入积分有效期限(年)">
              </el-input>
              <span class="help-block">单位为年，默认3年</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="18" :md="24" :lg="24">
            <el-form-item label="积分与现金兑换比例:">
              <el-input v-model="dataForm.rate" :disabled="true" auto-complete="off" placeholder="请输入积分与现金兑换比例">
              </el-input>
              <span class="help-block">只需填写积分数，默认1元人民币等于100积分</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="18" :md="24" :lg="24">
            <el-form-item label="通道费比例:" prop="feeRate">
              <el-input v-model="dataForm.feeRate" auto-complete="off" placeholder="请输入通道费比例">
              </el-input>
              <span class="help-block">比例必须为0-1</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="18" :md="24" :lg="24">
            <el-form-item label="出单员收益比例:" prop="referRate">
              <el-input v-model="dataForm.referRate" auto-complete="off" placeholder="请输入直接上级比例">
              </el-input>
              <span class="help-block">比例必须为0-1</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="18" :md="24" :lg="24">
            <el-form-item label="业务员收益比例:" prop="superRate">
              <el-input v-model="dataForm.superRate" auto-complete="off" placeholder="请输入间接上级比例">
              </el-input>
              <span class="help-block">比例必须为0-1</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </el-row>
    <el-row type="flex" justify="center" style="margin-top:50px;">
      <el-button type="primary" @click.native="Submit">保存</el-button>
    </el-row>

  </div>
  <!-- <el-row type="flex" class="row-bg" justify="center">
    <el-col>
      1111
    </el-col>
  </el-row> -->
</template>
<script type="text/javascript">
import commons from '../../common/js/common'
import { scoreConfig, updateScoreConfig } from '../../api/api';
export default {
  data() {
    var feeRates = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('通道比例不能为空'));
      }
      else {
        if (!(/^-?\d+(\.\d{1,6})?$/.test(value))) {
          callback(new Error('小数不能超过6位'));
        }
        else if (value > 1) {
          callback(new Error('不能大于1'));
        }
        else {
          callback();
        }
      }
    };
    var helpText = (rule, value, callback) => {
      if (value==0||value=='0') {
        return callback();
      }
      if (commons.isEmpty(value)) {
        return callback(new Error('比例不能为空'));
      } else if (!(/^-?\d+(\.\d{1,6})?$/.test(value))) {
        return callback(new Error('小数不能超过6位'));
      }
      else {
        if (value > 1) {
          return callback(new Error('比例不能大于1'));
        }
        else {
          return callback();
        }
      }
    };
    return {
      dataForm: {
        ruleSwitch: '',
        tbreback: '',
        period: '3',
        rate: '100',
        feeRate: '',
        superRate: '',
        referRate: ''
      },
      dataForms: {
        feeRate: [{ required: true, validator: feeRates, trigger: 'blur' }],
        superRate: [{ required: true, validator: helpText, trigger: 'blur' }],
        referRate: [{ required: true, validator: helpText, trigger: 'blur' }],
      }
    }
  }
  , methods: {
    defaultValue: function () {
      scoreConfig().then((res) => {
        if (res.data.success) {
          this.dataForm = Object.assign({}, res.data.result[0]);
        }
        else {
          this.$message({
            message: res.data.result,
            type: 'error'
          });
        }
      });
    },
    Submit: function () {
      let para = this.dataForm;
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          updateScoreConfig(para).then((res) => {
            if (res.data.success) {
              this.$message({
                message: '提交成功',
                type: 'success'
              });
              this.defaultValue();
            }
            else {
              this.$message({
                message: res.data.result,
                type: 'error'
              });
            }
          });
        }
      });
    }
  },
  mounted() {
    this.defaultValue();
  }
}

</script>
<style scoped>
.hr-line-dashed {
  width: 100%;
  border-top: 1px dashed #e7eaec;
  color: #fff;
  background-color: #fff;
  height: 1px;
  margin: 15px 0;
  box-sizing: border-box;
}
.help-block {
  color: #999;
  font-size: 12px;
  display: block;
}
</style>